<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 730px;
      height: 454px;
      padding: 8px;
      border: 1px solid green;
      margin: 100px auto;
    }

    .inner {
      position: relative;
      overflow: hidden;
      height: 454px;
    }

    #imglist {
      width: 700%;
      position: absolute;
      left: 0;
      transition: left 300ms linear;
    }

    li {
      float: left;
    }

    .list {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -85px;
    }

    .list i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      float: left;
      font-style: normal;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .list i:last-child {
      margin-right: 0;
    }

    .list i.current {
      background-color: skyblue;
      color: #fff;
    }

    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -30px;
    }

    .arrow-left,
    .arrow-right {
      width: 30px;
      height: 60px;
      position: absolute;
      font: 20px/60px "consolas";
      color: #fff;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      cursor: pointer;
    }

    .arrow-right {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="inner" id="inner">
      <ul id="imglist">
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
      </ul>
      <div class="list">
        <i class="current">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
      </div>
      <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
      </div>
    </div>
  </div>

</body>
<script>
  /*
  效果：
    1.序号轮播
    2.点击左右按钮轮播
    3.自动轮播
    4.鼠标悬停在轮播图上面的时候，停止自动轮播，离开就继续自动轮播

  思路：
    1. 给序号注册鼠标移入事件，根据当前序号的索引，算出ul应该移动的位置，设置给ul
    2. 给按钮注册点击事件，
        按照左右按钮的逻辑，算出下一张，算出ul所在位置，设置给ul
    3. 跟右边按钮的逻辑是一样的，只不过是每隔一段时间，就自动点击右边一次，所以把点击右边按钮的逻辑，封装，然后每隔一段时间，调用一次
    4 鼠标移入，把定时器停止，鼠标移出，把定时器重新开启

  步骤：
    1 实现序号轮播
    1.1 获取元素 (小圆点，ul)
    1.2 给序号注册鼠标移入事件
    1.3 计算出ul应该在的位置
      ul的位置 = 图片的宽度 * 对应的索引 * -1
    1.4 设置给ul

  步骤：
    1.获取左右按钮的元素
    2.注册点击事件
    3.点击右边的按钮
        希望图片从第n张到n+1张- 自己定义一个变量，表示当前是第几张图片
        让索引++
        算出ul的位置，设置给ul
        处理小圆点

  实现自动轮播的步骤：
    1.写一个定时-setInterval()
    2.定时器里面调用右边按钮的函数就行了
*/

  window.onload = function () {
    // 1 实现序号轮播
    // 1.1 获取元素 (小圆点，ul)
    var circles = document.querySelectorAll('.list>i');
    // console.log(circles);
    var ul = document.getElementById('imglist');
    // 定义一个变量，保存图片的宽度
    var imgWidth = ul.children[0].offsetWidth; // li和图片的宽度是一样的
    // 1.2 给序号注册鼠标移入事件
    circles.forEach(function (c, i) {
      c.onmouseover = function () {
        // 1.3 计算出ul应该在的位置
        //    ul的位置 = 图片的宽度 * 对应的索引 * -1
        var target = imgWidth * i * -1;
        // 1.4 设置给ul
        ul.style.left = target + 'px';
        // 排他的设置小圆点的样式
        circles.forEach(function (e) {
          e.classList.remove('current');
        });
        this.classList.add('current');
      }
    });

    // 使用一个变量表示当前是第几张图片
    var currentIndex = 0;

    // 实现左右按钮轮播
    var leftBtn = document.querySelector('.arrow-left');
    var rightBtn = document.querySelector('.arrow-right');
    //注册点击事件
    rightBtn.onclick = moveRight;

    function moveRight() {
      // 如果已经是最后一张，让它切换到第0张
      if (currentIndex === ul.children.length - 1) {
        currentIndex = 0;
      } else {
        // 让表示第几张图片的变量++
        currentIndex++;
      }
      // 算出ul的位置
      var target = currentIndex * imgWidth * -1;
      // 设置ul的位置
      ul.style.left = target + 'px';
      // 处理小圆点
      circles.forEach(function (c) {
        c.classList.remove('current');
      });
      circles[currentIndex].classList.add('current');
    }

    leftBtn.onclick = function () {
      // 如果已经第一张，切换到最后一张
      if (currentIndex === 0) {
        currentIndex = ul.children.length - 1;
      } else {
        // 让表示第几张图片的变量--
        currentIndex--;
      }
      // 算出ul的位置
      var target = currentIndex * imgWidth * -1;
      // 设置ul的位置
      ul.style.left = target + 'px';
      // 处理小圆点
      circles.forEach(function (c) {
        c.classList.remove('current');
      });
      circles[currentIndex].classList.add('current');
    }

    // 自动轮播
    // var timer = setInterval(function () {
    //   moveRight();
    // }, 2000);
    var timer = setInterval(moveRight,2000);

    // 鼠标移入移出
    // 给轮播图的结构注册鼠标的移入事件，把定时器停止
    var box = document.getElementById('box');
    box.onmouseover = function () {
      clearInterval(timer);
    }
    // 鼠标移出，恢复自动轮播
    box.onmouseout = function () {
      timer =setInterval(moveRight,2000);
    }

  }
</script>

</html>